<!DOCTYPE html>
<html>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<title>HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wDYEcxgRRheZwyC9jpN1Tt7fzr2zjosZ"></script>

	<style type="text/css">
		body,
		html,
		#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>
	<link rel="stylesheet" href="css/mui.min.css">
	</head>

	<body>
		<div>
			<input id="search" style="width: 80%;height: 2rem;" placeholder="搜地点"><img style="margin-right: 2rem;" class=" mui-pull-right " src="images/search.png">
		</div>
		<div id="allmap"></div>
	</body>

</html>
<script type="text/javascript">
	// 百度地图API功能
	var search = document.getElementById('search');

	var map = new BMap.Map("allmap");
	var points = new Array();
	points[0] = new BMap.Point(113.64964385, 34.75661006);
	for(var i = 1; i < 10; i++) {
		points[i] = points[i - 1] + 0.00000001;
	}

	map.centerAndZoom(points[0], 15);

	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r) {
		if(this.getStatus() == BMAP_STATUS_SUCCESS) {
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			search.value = r.point.lng + ',' + r.point.lat;
			alert('您的位置：' + r.point.lng + ',' + r.point.lat);
		} else {
			alert('failed' + this.getStatus());
		}
	}, { enableHighAccuracy: true })

	function search() {

	}

	// 定义一个控件类，即function    
	function ZoomControl() {
		// 设置默认停靠位置和偏移量  
		this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		this.defaultOffset = new BMap.Size(10, 10);
	}
	// 通过JavaScript的prototype属性继承于BMap.Control   
	ZoomControl.prototype = new BMap.Control(); // 将标注添加到地图中
	// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
	// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
	ZoomControl.prototype.initialize = function(map) {
		// 创建一个DOM元素   
		var div = document.createElement("div");
		// 添加文字说明    
		div.appendChild(document.createTextNode("放大2级"));
		// 设置样式    
		div.style.cursor = "pointer";
		div.style.border = "1px solid gray";
		div.style.backgroundColor = "white";
		// 绑定事件，点击一次放大两级    
		div.onclick = function(e) {
			map.zoomTo(map.getZoom() + 2);
		}
		// 添加DOM元素到地图中   
		map.getContainer().appendChild(div);
		// 将DOM元素返回  
		return div;
	}
	// 创建控件实例    
	var myZoomCtrl = new ZoomControl();
	map.addControl(myZoomCtrl);
</script>